<template>
    <div class="category-dialog">
        <el-dialog :title="title" :visible="dialogFormVisible" :show-close="false" width="45%" :modal-append-to-body="false" >
            <el-form :model="form" :disabled="true">
                <el-form-item label="菜单编号" v-if='form.moduleId==null'>
                    <el-input v-model="form.moduleId" auto-complete="off" ></el-input>
                </el-form-item>

                <el-form-item label="菜单编号" v-else>
                    <el-input v-model="form.moduleId" auto-complete="off" :disabled="true" ></el-input>
                </el-form-item>

                <el-form-item label="菜单名称" >
                    <el-input v-model="form.moduleName" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="资源类型">
                      <el-radio-group v-model="form.moduleType">
                         <el-radio :label="1">菜单</el-radio>
                         <el-radio :label="0">按钮</el-radio>
                       </el-radio-group>
                 </el-form-item>

                <el-form-item label="资源对应URL" v-if='form.moduleType==0' >
                   <el-input v-model="form.linkUrl" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="排序号" >
                   <el-input v-model="form.sortNo" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="是否可用" >
                    <el-radio-group v-model="form.isValidate":disabled="true">
                      <el-radio :label="1">正常</el-radio>
                      <el-radio :label="0">被删除</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="菜单描述" >
                    <el-input v-model="form.moduleRemark" type="textarea" :rows="3" placeholder="请输入备注说明"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="$emit('cancel');">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'viewMenu',
        props: {
            dialogFormVisible:Boolean,
            data: [Object,Boolean],
            title:String,
            menusList:Array,
        },
        data() {
            return {
              props: {
                value:'moduleId',
                label: 'moduleName',
                children: 'children'
              },
                form: {
                  moduleId:null,
                  moduleName:'',
                  parentId:'',
                  moduleRemark:'',
                  linkUrl:'',
                  sortNo:null,
                  moduleType:'',
                  isValidate:'',
                },
              btnLoading:false,
            }
        },
        watch: {
            'data': {
                handler: function () {
                    if(this.data){
                        for (let k in this.form){
                          this.form[k] = this.data[k];
                        }
                    }else {
                      for (let k in this.form){
                        this.form[k] = '';
                      }
                    }
                },
                deep: true
            }
        },
        methods: {
          handleChange(){},
        },
        components: {

        }
    }
</script>
<style lang="less">
    .category-dialog{
        .el-cascader{
            width: 100%;
        }
    }
</style>
